import { CloudCircleOutlined } from "@mui/icons-material";
import ShareIcon from '@mui/icons-material/Share';
import DeleteIcon from '@mui/icons-material/Delete';
import { Box, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import './side-menu.css'
import { NavLink } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { closeMenu } from "../../app/features/koalaFilePanelSlice";

function SideMenu(props) {
    const menusStats = useSelector(state => state.koalaFilePanelReducer.menus);
    const dispatch = useDispatch();
    let className= "side-menu";
    if (menusStats) {
        className += " menu-open";
    } else {
        className += " menu-close";
    }
    function handleMenusItemClick(e) {
        dispatch(closeMenu())
    }
    return (
        <Box className={className} sx={{left:{md:0, lg:0}, position:{xs:'absolute', md:'static'}}}>
            <List>
                <NavLink to={"file"} className={({ isActive, isPending }) =>
                      isActive ? "selected" : "unselected"
                    }
                    onClick={handleMenusItemClick}
                    >
                    <ListItemButton >
                        <ListItemIcon>
                            <CloudCircleOutlined/>
                        </ListItemIcon>
                        <ListItemText>我的文件</ListItemText>
                    </ListItemButton>
                </NavLink>
                <NavLink to={"shared"} className={({ isActive, isPending }) =>
                      isActive ? "selected" : "unselected"
                    }
                    onClick={handleMenusItemClick}
                    >
                    <ListItemButton >
                        <ListItemIcon>
                            <ShareIcon/>
                        </ListItemIcon>
                        <ListItemText>已分享</ListItemText>
                    </ListItemButton>
                </NavLink>
                <NavLink to={"recyclebin"} className={({ isActive, isPending }) =>
                      isActive ? "selected" : "unselected"
                    }
                    onClick={handleMenusItemClick}
                    >
                    <ListItemButton >
                        <ListItemIcon>
                            <DeleteIcon/>
                        </ListItemIcon>
                        <ListItemText>回收站</ListItemText>
                    </ListItemButton>
                </NavLink>
            </List>
        </Box>
    )
}

export default SideMenu;